/* 歌单提示栏 */
/* .lead{
    width: 1510px;
    height: 35px;
    background-color: #c20c0c;
}
.content{
    height: 35px;
    width: 774px;
    background-color: blue;
    margin-left: 474px;                                                                                                                                 
}
.content ul{
    color: white;
    font-size: 12px;
    margin: 7px 17px 0px;
    padding:  0px 13px;
}
.music{
    width: 1510px;
    height: 1743.2px;
    background-color: green;
}
.musiccontent{
    width: 980px;
    height: 1743.2px;
    margin-left: 265px;
    background-color: red;
} */

/* 基本样式 */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.lead {
    width: 100%;
    height: 35px;
    background-color: #c20c0c;
    border-bottom: 1px solid #a40011;
}

.lead  .content {
    height: 34px;
    width: 50%;
    /* width: 1100px; */
    /* background-color: blue; */
    margin: 0 auto;
}

.lead  .content ul{
    padding-left: 180px;
}

.lead  .content li{
    color: white;
    float: left;
    font-size: 12px;
    height: 34px;
    line-height: 34px;
    padding: 0 13px;
    margin: 2px 17px 0;
    border-radius: 20px;     /* 圆角 */ 
}

.lead  .content li em{
    background-color: #9B0909;
    height: 20px;
    padding: 0 13px;
    border-radius: 20px;
}
/* 红色导航条结束 */


/* .content ul {
    color: white;
    font-size: 12px;
    margin: 7px 17px 0px;
    padding: 0px 13px;
    list-style: none;
    display: flex;
    justify-content: space-around;
} */
/* 歌单开始 */
.music {
    width: 100%;
    height: 1743.2px;
    /* height: 1579px; */
    /* background-color: green; */
    background-image: url('./背景.png'); /* 设置背景图片 */
    background-size: cover; /* 让图片覆盖整个元素 */
    background-position: center; /* 图片居中显示 */
}

.musiccontent {
    width: 60%;
    height: 1743.2px;
    /* height: 1579px; */
    padding: 40px;
    margin: 0 auto;
    background-color: white;
}
.search-bar {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #c20c0c;
    padding-bottom: 5px;
    font-size: 24px;
  }
  
  .search-bar span {
    margin-right: 10px;
  }
  
  select {
    padding: 5px;
    margin-right: 10px;
    color: blue;
    width: 86px;
    height: 31px;
    border-radius: 8px;
    font-size: 13px;
  }
  
  button {
    background-color: #c20c0c;
    color: white;
    border: none;
    border-radius: 8px;
    position: absolute;
    left: 1150px;
    padding: 5px 10px;
    cursor: pointer;
  }
/* 歌单列表开始 */
.list-box{
    width: 60%;
    height: 1526px;
    position: absolute;
    top: 150px;
} 
.music .list{
    /* width: 181.2px; */
    width: 20%;
    height: 218px;
    /* background-color: skyblue; */
    position: relative;
    float: left;
}
.music .list .rebottom{
    position: relative;
    margin: -27px 0 0 0; 
    /* width: 100%; */
    width: 140px;
    height: 27px;
    top: 140px;
    /* padding-right: 5px; */
    background-color: #333;
    opacity: 0.5;
    /* background-color: green; */
}
.music .list .rebottom .ear{
    position: absolute;
    height: 11px;
    width: 14px;
    margin: 9px 5px 9px 10px;
    background-image: url('https://s2.music.126.net/style/web2/img/iconall.png?6c041c0018a9840c22057f96d810c8a8');
    background-repeat: repeat-x;
    background-position: 0 -24px;
}
.music .list .rebottom .bofangliang{
    /* background-color: red; */
    width: 60px;
    height: 16.8px;
    position: absolute;
    top: 7px;
    left: 28px;
    color: #ccc;
    font-size: 12px;
}
.music .list .rebottom .bofangbiao{
    position: absolute;
    width: 16px;height: 17px;
    bottom: 5px;right: 10px;
    background-image: url('https://s2.music.126.net/style/web2/img/iconall.png?6c041c0018a9840c22057f96d810c8a8');
    background-repeat: repeat-x;
    background-position: 0 0;
}
.music .list .word{
    position: absolute;
    top: 145px;
    left: 0;
    width: 140px;height: 19.6px;
    color: #000;
    font-size: 14px;
    /* background-color: yellow; */
}
.music .list .by{
    font-size: 12px;
    position: absolute;
    top: 170px;
    left: 0;
    color: #999999;
}
.music .list .name{
    position: absolute;
    top: 170px;
    left: 20px;
    width: 120px;
    height: 16.8px;
    color: #666666;
    font-size: 12px;
    /* background-color: green; */
}
.shenglue{
    overflow: hidden;          /* 隐藏超出的文本 */
    text-overflow: ellipsis;           /* 显示省略号 */
    white-space: nowrap;       /* 禁止换行 */
    word-wrap: normal;         /* 禁止换行 */
}

.music .list .img {
    width: 140px;
    height: 140px;
    background-color: black;
    position: absolute;
    top: 0;
    /* right: 0; */
}

/* 响应式布局 */
@media (max-width: 768px) {
    .content {
        width: 80%;
    }
    .musiccontent {
        width: 90%;
    }
}

@media (max-width: 480px) {
    .content {
        width: 90%;
    }
    .musiccontent {
        width: 95%;
    }
}

/* 底部栏开始 */
.playBar{
    position: fixed;
    left: 0%;
    bottom: 0%;
    z-index: 1002;      /* 播放器的z-index值要大于播放器按钮的z-index值 */
    width: 100%;
    height: 53px;
    font-size: 12px;

    opacity: 0;
      /* 初始状态为透明 */
      visibility: hidden;
      /* 初始状态为隐藏 */
      transition: opacity 0.3s ease, visibility 0.3s ease;
      /* 添加过渡效果 */

    background-image: url('https://s2.music.126.net/style/web2/img/frame/playbar.png?81023a66aea33d03779bef32544acd4f');
    background-repeat: repeat-x;
    background-position: 0 0;
}
.playBar .wrap{
    position: absolute;
    left: 50%;
    top: 6px;
    width: 1040px;
    height: 47px;
    margin-left: -490px;
    /* background-color: white; */
}
/* 播放的三个按钮 */
.playBar .playBtns{
    float: left;
    width: 137px;
    padding: 6px 0 0 0;
}
.playBtns a{
    float: left;
    width: 28px;
    height: 28px;
    margin: 5px 8px 0 0;
    text-indent: -9999px;               /* 利用缩进隐藏链接文字 */


    background-image: url('https://s2.music.126.net/style/web2/img/frame/playbar.png?81023a66aea33d03779bef32544acd4f');
    background-repeat: repeat-x;
    background-position: 0 0;
}
.playBtns a.up{
    background-position: 0 -130px;
}
.playBtns a.up:hover{
    background-position: -30px -130px;
    /* 在鼠标放上去的时候切换背景图（亮度不同） */
}
.playBtns a.play{
    width: 36px;
    height: 36px;
    margin-top: 0;
    background-position: 0 -204px;
}
.playBtns a.play:hover{
    width: 36px;
    height: 36px;
    margin-top: 0;
    background-position: -40px -204px;
}

/* 需要制作一个点击 */
/* .playBtns a.play:clicked{
    width: 36px;
    height: 36px;
    margin-top: 0;
    background-position: 0 -165px;
} */

.playBtns a.next{
    background-position: -80px -130px;
}
.playBtns a.next:hover{
    background-position: -110px -130px;
}
/* 歌曲图片 */
.playBar .songHead{
    width: 34px;
    height: 34px;
    position: relative;
    margin: 6px 15px 0 0;
    float: left;
    background-image: url('https://s2.music.126.net/style/web2/img/frame/playbar.png?81023a66aea33d03779bef32544acd4f');
    background-repeat: repeat-x;
    background-position: 0 0;

    background-position: 0 -80px;
}
/* 进度条、播放时间 */
.playBar .progress{
    width: 466px;
    height: 9px;
    position: relative;
    left: 184px;
    top: 25px;

    background-image: url('https://s2.music.126.net/style/web2/img/frame/statbar.png?bcb9a4e8deaab14e92f177d197e98f02');
    background-repeat: repeat-x;
    background-position: right 0;
}
.playBar .progress .use{
    height: 9px;
    position: absolute;
    top: 0;
    left: 0;

    background-image: url('https://s2.music.126.net/style/web2/img/frame/statbar.png?bcb9a4e8deaab14e92f177d197e98f02');
    background-repeat: repeat-x;
    background-position: left -66px;
}

.playBar .progress .use span.yuandian{
    position: absolute;
    top: -7px;
    right: -13px;
    width: 22px;
    height: 24px;

    background-image: url('https://s2.music.126.net/style/web2/img/iconall.png?1c4c5eb7dc04b58a331a4e8f9391ec92');
    background-repeat: repeat-x;
    background-position: 0 -280px;
}
.playBar .progress .use span.yuandian:hover{
    position: absolute;
    top: -7px;
    right: -13px;
    width: 22px;
    height: 24px;

    background-image: url('https://s2.music.126.net/style/web2/img/iconall.png?1c4c5eb7dc04b58a331a4e8f9391ec92');
    background-repeat: repeat-x;
    background-position: 0 -250px;
}

.playBar .progress .playTime{
    position: absolute;
    top: -3px;
    right: -84px;
    color: #797979;
    font-size: 12px;
}
.playBar .progress .playTime em{
    color: #a1a1a1;
}
/* 音量到列表 */
.playBar .scfx{
    position: relative;
    width: 75px;
    /* float: left; */
    font-size: 12px;
    left: 750px;
    top: -30px;
}
.playBar .scfx a.inphoto{
    float: left;
    height: 25px;
    width: 25px;
    text-indent: -9999px; 
    background-image: url('https://p1.music.126.net/DLVi_1eymwAX8gDunfd2bg==/109951165524394991.png');
    background-repeat: repeat-x;
    background-position:0 0 ;
}
.playBar .scfx a.inphoto:hover{
    background-position: 0 -25px;
}

.playBar .scfx a.add{
    float: left;
    /* left: 775px; */
    height: 25px;
    width: 25px;
    text-indent: -9999px; 
    background-image: url('https://s2.music.126.net/style/web2/img/frame/playbar.png?81023a66aea33d03779bef32544acd4f');
    background-repeat: repeat-x;
    background-position: -88px -163px;
}
.playBar .scfx a.add:hover{
    background-position: -88px -189px;
}
.playBar .scfx a.share{
    float: left;
    /* left: 800px; */
    height: 25px;
    width: 25px;
    text-indent: -9999px; 
    background-image: url('https://s2.music.126.net/style/web2/img/frame/playbar.png?81023a66aea33d03779bef32544acd4f');
    background-repeat: repeat-x;
    background-position: -114px -163px;
}
.playBar .scfx a.share:hover{
    background-position: -114px -189px;
}
.playBar .control{
    position: relative;
    z-index: 10;
    width: 113px;
    height: 25px;
    /* float: left; */
    left: 830px;
    padding-left: 13px;
}
.playBar .control a.volume{
    /* float: left; */
    position: absolute;
    left: 8px;
    top: -8px;
    height: 25px;
    width: 25px;
    text-indent: -9999px;
    margin: 11px 2px 0 0;
    background-image: url('https://s2.music.126.net/style/web2/img/frame/playbar.png?81023a66aea33d03779bef32544acd4f');
    background-repeat: repeat-x;
    background-position: -2px -248px;
}
.playBar .control a.volume:hover{
    background-position: -31px -248px;
}
.playBar .control .volumeWrap{
    position: absolute;
    left: 8px;
    width: 32px;height: 119px;

    background-image: url('https://s2.music.126.net/style/web2/img/frame/playbar.png?81023a66aea33d03779bef32544acd4f');
    background-repeat: repeat-x;
    background-position: -2px -248px;
}
.playBar .beijing{
    position: absolute;
    top: -122;
    width: 32px;
    height: 113px;
    background: #000;
    opacity: .5;                          /* 透明度 */
}
.playBar .control a.way{
    position: absolute;
    left: 33px;
    top: -8px;
    height: 25px;
    width: 25px;
    text-indent: -9999px;
    margin: 11px 2px 0 0;
    background-image: url('https://s2.music.126.net/style/web2/img/frame/playbar.png?81023a66aea33d03779bef32544acd4f');
    background-repeat: repeat-x;
    background-position: -66px -248px;
}
.playBar .control a.way:hover{
    background-position: -93px -248px;
}
.playBar .control a.bflist{
    position: absolute;
    left: 58px;
    width: 38px;
    height: 25px;
    line-height: 27px;
    text-align: center;
    color: #666;
    text-decoration: none;
    text-indent: 0;
    background-image: url('https://s2.music.126.net/style/web2/img/frame/playbar.png?81023a66aea33d03779bef32544acd4f');
    background-repeat: repeat-x;
    background-position: -42px -68px;
}
.playBar .control a.bflist:hover{
    background-position: -42px -98px;
}

.playBar .control .tip{
    position: absolute;
    top: -53px;
    left: -25px;
    width: 81px;
    height: 39px;
    line-height: 41px;
    color: #fff;
    font-size: 13px;
    text-align: center;
    background: #000;
    border-radius: 10px;
    text-shadow: 0 1px 0 #080707;             /* 文字阴影 */

}
.playBar .yinzhi{
    background: url(https://s2.music.126.net/style/web2/img/mail/audio-quality.png?7d7e6cbdf6fcd4f15082a8e028ad0d39) no-repeat;
    background-size: 45px 30px;
    margin-left: 4px;
    width: 41px;
    margin-top: 9px;
    position: absolute;
    top: -4px;
    left: 940px;
    height: 25px;
    margin: 11px 2px 0 0;
    text-indent: -9999px;
}

.playBar .lockBtn{
    width: 52px;height: 67px;
    position: fixed;
    right: 20px;
    bottom: 0;
    z-index: 20;
    background-image: url('https://s2.music.126.net/style/web2/img/frame/playbar.png?81023a66aea33d03779bef32544acd4f');
    background-repeat: repeat-x;
    background-position: 0px -380px; 
}

.playBar .lockBtn a.btn{
    display: block;
    width: 18px;height: 18px;
    margin: 6px 0 0 17px;
    background-image: url('https://s2.music.126.net/style/web2/img/frame/playbar.png?81023a66aea33d03779bef32544acd4f');
    background-repeat: repeat-x;
    background-position: -100px -380px;
}
.playBar .lockBtn a.btn:hover{
    background-position: -100px -400px;
}


/* 分页导航样式 */
.pagination {
    list-style-type: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    position: absolute;
    top: 1670px;
    left: 560px;
  }
  
  .page-item {
    margin: 0 5px;
  }
  
  .page-item a {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    background-color: #fff;
    transition: background-color 0.3s ease;
  }
  
  .page-item a:hover {
    background-color: #f4f4f4;
  }
  
  /* 页面内容区域样式 */
  .page-content {
    /* display: none; */
    margin: 20px;
  }
  
  .page-content.active {
    display: block;
  }